<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/blog_list.css">
    <script src="js/jquery.min.js"></script>
</head>

<body>
<!-- 导航栏 -->
<div class="nav">
    <img src="img/logo2.jpg" alt="">
    <span class="title">我的博客系统</span>
    <!-- 用来占据中间位置 -->
    <span class="spacer"></span>
    <a href="index.html">主页</a>
    <a href="blog_add.html">写博客</a>
    <a id="islogin" href="javascript:logout()">退出</a>
    <!-- <a href="#">注销</a> -->
</div>
<!-- 版心 -->
<div class="container">
    <!-- 左侧个人信息 -->
    <div class="container-left">
        <div class="card">
            <img src="img/doge.jpg" class="avtar" alt="">
            <h3 id="nickname"></h3>
            <a href="http:www.github.com">github 地址</a>
            <div class="counter">
                <span>文章</span>
                <span>分类</span>
            </div>
            <div class="counter">
                <span id="acount"></span>

            </div>
        </div>
    </div>
    <!-- 右侧内容详情 -->
    <div id="artlist" class="container-right">
        <div id="unart" style="text-align: center;display:none">
            <h3>当前用户未发表文章</h3>
        </div>
        <!-- 每一篇博客包含标题, 摘要, 时间 -->
       

    </div>

</div>
<script>
    //1.查询访问用户的信息
    function myUserInfo() {
        jQuery.ajax({
            url: "loginUserInfo",
            type: "GET",
            success: function (result) {
                if (result != null && result.succ == 200) {
                    //后端交互正常
                    if (result.data != null && result.data.uid > 0) {
                        //登录正常
                        jQuery("#nickname").text(result.data.nickname);

                        uid = result.data.uid;
                        createArtList();
                    } else {//data为空，没查询到此用户
                        alert("抱歉，请先登录");
                        location.href = "login.html";
                    }
                } else {
                    alert("抱歉，后端程序不可用，请你稍后再试");
                }
            }
        });
    }

    myUserInfo();

    //2.得到用户的文章列表+
    function createArtList() {
        jQuery.ajax({
            url: "myartlist",
            type: "GET",
            data:{"uid":uid},
            success: function (result) {
                if (result != null && result.succ == 200) {//前后端交互正常
                    var artlist = result.data;
                    if (artlist != null && artlist.length > 0) {
                        jQuery("#acount").text(artlist.length);
                        var artHtml = "";
                        // 当前用户有发表的文章
                        for (var i = 0; i < artlist.length; i++) {
                            var article = artlist[i];
                            artHtml += '<div  class="blog"> <div class="title">' +
                                article.title + '</div><div class="date">' +
                                article.createtime + '</div> <div class="desc">' +
                                article.desc + '</div> <div style="text-align: center"> <a href="blog_content.html?id=' +
                                article.aid + '" class="detail2">&nbsp;查看全文 &nbsp;</a>&nbsp; <a style="color: #b8860b;" href="blog_edit.html?aid=' +
                                article.aid + '" class="detail2">&nbsp;修改&nbsp;</a>&nbsp; <a style="color: #ff0000;" href="javascript:del('+
                                article.aid+')" class="detail2">&nbsp;删除&nbsp;</a>' +
                                ' </div></div><hr>';
                        }
                        jQuery("#artlist").html(artHtml);
                    } else {
                        jQuery("#unart").show();//没有文章
                    }
                } else {
                    alert("抱歉，后端服务出错");
                }

            }
        });
    }
    //退出时间
    function logout() {
        if(confirm("是否退出")){
            //1.清空session
            jQuery.ajax({
                url:"loginout",
                type:"POST",
                success:function (result) {
                    if(result!=null && result.succ==200 && result.data==1){
                        alert("恭喜，退出成功");
                        //这里注意页面跳转的格式
                        // location.href("login.html");
                        location.href = "login.html";
                    }else{
                        alert("抱歉，操作出错，请重试");
                    }
                }
            });
            //2.跳转到登录页面
        }

    }
    //删除事件
    function del(aid) {
        if(confirm("是否确认删除")){
            if(aid!=null && aid >0){
                jQuery.ajax({
                    url:"delart",
                    type:"POST",
                    data:{"aid" : aid},
                    success:function (result) {
                        if(result!=null && result.succ==200 &&result.data==1){
                            //前后端交互正常

                            //刷新页面
                            location.href = location.href;
                        }else {
                            alert("抱歉后端异常"+result.msg);
                        }
                    }
                });
            }
        }

    }
</script>
</body>

</html>